<template>
	<view class="opt-bar-view">
		<view style="padding: 20rpx;">
			<view class="flex-row space">
				<view v-if="!isFirst">
          <view  @click="handleLast" class="entry-btn-prev">
            <text>上一项</text>
          </view>
				</view>
				<template v-if="waitMemb">
          <view v-if="!isFirst" @click="handleWithDraw" class="entry-btn-submit">
            <view>
              <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/edit-icon.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
            </view> 
            <text class="text ml10">撤回并修改</text>
          </view>
          <view v-if="!isLast" @click="handleNext" :class="isLast ? 'entry-btn-submit' : 'entry-btn-prev'">
            <view v-if="isLast">
              <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/commit.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
            </view> 
            <text class="text ml10">{{(isLast ? '提交' : '下一项') }}</text>
          </view>
				</template>

				<template v-else>
					<template v-if="newMemb">
						<template v-if="waitMemb">
              <view v-if="waitMemb && !isFirst" @click="handleWithDraw" class="entry-btn-submit">
								<text class="text ml10">撤回并修改</text>
							</view>
              <view  @click="handleNext" :class="isLast?'entry-btn-submit' : 'entry-btn-prev'">
                <view v-if="isLast">
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/commit.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
								<view  class="text ml10" >{{(isLast ? '提交' : '下一项') }}</view>
							</view>
						</template>
						<template v-else>
              
              <view  @click="handleSubmit" :class="isLast?'entry-btn-submit':'entry-btn-prev'" class="flex2" style="flex: 1;margin-left: 40rpx;">
                <view v-if="isLast">
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/tijiao_icon.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
								<view  class="text ml10">{{(isLast ? '提交' : '下一项') }}</view>
							</view>
						</template>
					</template>
					<!-- 老员工 -->
					<template v-else>
						<template v-if="!isFirst && !isEdit">
							<view key="6" class="entry-btn-submit" @click="handleEdit">
                <view>
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/edit-icon.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
                <view  class="text ml10">编辑</view>
              </view>
							<view v-if="!isLast" key="12"  :class="isLast ? 'entry-btn-submit' : 'entry-btn-prev'" @click="handleNext">
                <view v-if="isLast">
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/tijiao_icon.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
								<view class="text ml10">{{(isLast ? '提交' : '下一项') }}</view>
							</view>
						</template>
						<template v-else>
              <view key="10" v-if="!isFirst && !isLast"  class="entry-btn-submit" @click="handleOk">
                <view >
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/commit.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
                <view  class="text ml10">提交</view>
              </view>
              <view key="8"  @click="handleSubmit" :class="isLast ? 'entry-btn-submit' : 'entry-btn-prev'">
                <view v-if="isLast">
                  <u-image src="https://asa-hr.oss-cn-beijing.aliyuncs.com/HR-h5/commit.png" width="32rpx" height="32rpx" mode="fill"> </u-image>
                </view> 
								<view class="text ml10">{{(isLast ? '提交' : '下一项') }}</view>
							</view>
						</template>
					</template>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {
  postEmplyeeWithdraw,
} from "@/model";
import {ref,watch} from 'vue'
import { storeToRefs } from 'pinia';
import entryStore from '@/lib/store/entry';
import { onLoad } from "@dcloudio/uni-app";
const entrystore = entryStore();
const {isEdit} = storeToRefs(entrystore);
const emits = defineEmits(['on-prev','on-next','on-submit','on-edit','on-ok']);
	// import {
	// 	Notify,
	// 	Dialog
	// } from 'vant'
	const props =  defineProps({
			isFirst: {
				type: Boolean,
				default: false
			},
			isLast: {
				type: Boolean,
				default: false
			},
			readonly: {
				type: Boolean,
				default: false
			},
			goNext: {
				type: String,
				default: ''
			}
		})
    const	newMemb = ref(false); // 新员工只有提交就是下一项
    const	isModifying= ref(uni.getStorageSync('isModifying'));
    const	waitMemb= ref(false);
		// watch(()=>isEdit,(newVal,oldVal)=>{
    //   debugger
		// 			if (newVal) {
		// 				// uni.setStorageSync('isModifying', false)
		// 				isModifying.value = false;
		// 			} else {
		// 				uni.setStorageSync('isModifying', !newVal)
		// 				isModifying.value = !newVal;
		// 			}
		// 			refreshStatus()
		// 			console.log('edit watch readonly', newVal)
		// 	})
		onMounted(()=>{
			refreshStatus()
    }) 
		const	refreshStatus = ()=> {
				let status = uni.getStorageSync('archives_status');
				let userStatus = uni.getStorageSync('userStatus')
				let params = uni.getStorageSync('urlParams');
				if (status === 1) {
					newMemb.value = true;
          isEdit.value = true;
				} else {
					newMemb.value = false;
				}

				if (['REVIEWED', 'CONFIRM'].includes(userStatus)) {
					waitMemb.value = true;
          isEdit.value = !!uni.getStorageSync('isModifying');
				} else {
					waitMemb.value = false;
				}
        // if(uni.getStorageSync('isModifying')){
        //   isModifying.value = false
        // }else {
        //   uni.setStorageSync('isModifying', !isEdit)
				// 	isModifying.value = !isEdit;
        // }
			}
      const {proxy} = getCurrentInstance();
			const  handleWithDraw = async()=> {
        // handleEdit()
        // uni.setStorageSync('isModifying', true)
          uni.showModal({
          title: '操作提示',
          content: '确认撤回？',
          showCancel: false,
          success: async (res)=> {
            if (res.confirm) {
              // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
              try {
                uni.showLoading()
                await postEmplyeeWithdraw({
                  id: uni.getStorageSync('userId'),
                  archives_status: uni.getStorageSync('archives_status')
                })
                uni.showToast({
                  title: '操作成功',
                  icon: 'none'
                })
                await proxy.$fetchInfo();
                handleEdit()
                uni.setStorageSync('isModifying', true)
                refreshStatus();
              } catch (e) {
                //TODO handle the exception
              } finally {
                uni.hideLoading()
              }
            }
          },
        });

			}
			const handleEdit = () =>{
				
        isModifying.value = true
        isEdit.value = true;
				emits('on-edit')
			}
			const handleOk=()=> {
				emits('on-ok');
			}
			const handleLast=() =>{
				emits('on-prev')
			}
			const handleNext=()=> {
				emits('on-next')
			}
			const handleSubmit=()=> {
				emits('on-submit')
			}
</script>

<style lang="scss" scoped>
	.opt-bar-view {
    height: 160rpx;
		position: fixed;
    z-index:999;
		width: 100%;
		bottom: 0;
		background-color: #fff;
    .space{
      justify-content: space-between;
    }
	}

	.van-button--small {
		padding: 0 20px;
	}
  .entry-btn {
  height: 100rpx;
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  &-prev{
    min-width: 180rpx;
    height: 84rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #7E8999;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #7E8999;
    line-height: 84rpx;
    text-align: center;
  }
  &-submit{
    min-width: 262rpx;
    margin: 0 10rpx;
    height: 84rpx;
    background: #153776;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .text{
      height: 32rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 32rpx;
      // margin-left: 10rpx;
      border: none;
    }
  }
  .flex2{
    flex: 1;
    margin-left: 40rpx;
  }
}
.ml10{
  margin-left: 10rpx;
}
</style>
